import { withEffects, toProps } from 'refract'
import { map } from 'rxjs/operators'

const handler = initialProps => effect => {}

const aperture = () => component =>
    component
        .observe('value')
        .pipe(
            map(val => 2 * val),
            map(doubledVal => toProps({ doubledVal }))
        )

const Component = withEffects(handler)(aperture)(BaseComponent)

import { withEffects, asProps } from 'refract'
import { map } from 'rxjs/operators'

const handler = initialProps => effect => {}

const aperture = () => component =>
    component.observe().pipe(
        map(({ val, ...props }) => ({
            ...props,
            doubledVal: 2 * val
        })),
        map(asProps)
    )

const Component = withEffects(handler)(aperture)(BaseComponent)

import { map, scan, startWith } from 'rxjs/operators'

const handler = initialProps => value => {}

const aperture = ({ initialValue }) => component =>
    component
        .event('click')
        .pipe(
            scan(total => total + 1, initialValue),
            startWith(initialValue),
            map(total => toProps({ total }))
        )

const Component = withEffects(handler)(aperture)(BaseComponent)

import { withEffects, asProps } from 'refract'
import { merge } from 'rxjs'
import { map, mapTo } from 'rxjs/operators'

const handler = initialProps => effect => {}

const aperture = ({ store }) => component =>
    merge(
        store.observe(selectorA).pipe(map(a => ({ a }))),
        store.observe(selectorB).pipe(map(b => ({ b }))),
        store.observe(selectorC).pipe(map(c => ({ c })))
    ).pipe(mapTo(toProps))

const Component = withEffects(handler)(aperture)(BaseComponent)